<template>
  <div class="home">
    <my-head title="电影"></my-head>
    <div class="swbox">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(l, i) in banners" :key="i">
          <img :src="l.imgUrl" alt="" class="homeimg" />
        </van-swipe-item>
      </van-swipe>
      <div v-if="city" class="city" @click="gotocity">
        <span>
          {{ city.name }}
          <van-icon name="arrow-down" class="icons" />
        </span>
      </div>
    </div>
    <div class="nav">
      <van-tabs
        v-model="type"
        sticky
        animated
        swipeable
        color="#ff5f16"
        title-active-color="#ff5f16"
      >
        <van-tab title="正在热映" :name="1">
          <loadmore :getmovielist="getmovielist" :movielistadd="movielistadd">
            <mlist :list="list" :type="type"></mlist>
          </loadmore>
        </van-tab>
        <van-tab title="即将上映" :name="2">
          <loadmore :getmovielist="getmovielist" :movielistadd="movielistadd">
            <mlist :list="list" :type="type"></mlist>
          </loadmore>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>


<script>
import loadmore from "../../components/loadmore.vue";
export default {
  components: { loadmore },
  data() {
    return {
      list: [],
      banners: [],
      active: "pass",
      pageNum: 1, //当前页面
      pageSize: 10, //每页10条
      total: 0, //总条数
      type: 1, //1正在热映 2.即将上映
    };
  },
  watch: {
    type(v) {
      this.pageNum = 1; //  切换从第一页开始请求
      this.getmovielist(v);
    },
  },
  mounted() {
    // city

    if (this.city) {
      // 请求数据 或 请求轮播
      this.getmovielist();

      this.$ajax
        .getMaiData(
          {
            type: 2,
            cityId: this.city.cityId,
          },
          {
            "X-Host": "mall.cfg.common-banner",
            "X-Client-Info":
              '{"a":"3000","ch":"1002","v":"5.0.4","e":"16365292174875183017951233","bc":"410500"}',
          }
        )
        .then((res) => {
          this.$nextTick(() => {
            this.banners = res.data;
          });
        });
    } else {
      this.$dialog
        .alert({
          title: "选择城市",
          message: "未定位选择城市，请前往选择",
        })
        .then(() => {
          this.$router.push({ name: "city" });
        });
    }
  },
  methods: {
    movielistadd(cbone, cbmore) {
      this.pageNum++;
      if (this.pageNum > Math.ceil(this.total / this.pageSize)) {
        // 数据已经见底了
        cbone();
      } else {
        // 加载更多
        this.$ajax
          .getMaiData(
            {
              cityId: this.city.cityId,
              pageNum: this.pageNum,
              pageSize: this.pageSize,
              type: this.type,
            },
            {
              "X-Host": "mall.film-ticket.film.list",
            }
          )
          .then((res) => {
            this.list = this.list.concat(res.data.films);
            cbmore();
          });
      }
    },
    gotocity() {
      this.$router.push({ name: "city", query: { city: this.city.name } });
    },
    getmovielist(type) {
      type = type || this.type;
      this.$ajax
        .getMaiData(
          {
            cityId: this.city.cityId,
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            type,
          },
          {
            "X-Host": "mall.film-ticket.film.list",
          }
        )
        .then((res) => {
          this.list = res.data.films;
          this.total = res.data.total;
        });
    },
  },
};
</script>



<style lang="scss" scoped>
.home {
  .nav {
    ::v-deep .van-tabs {
      z-index: 1010;
    }
  }
}
.swbox {
  width: 100%;
  height: 210px;
  position: relative;
  .city {
    position: absolute;
    top: 18px;
    left: 7px;
    color: #fff;
    z-index: 10;
    font-size: 13px;
    background: rgba(0, 0, 0, 0.2);
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    text-align: center;
    padding: 0 5px;
    span {
      margin-right: 4px;
    }
  }

  .my-swipe {
    width: 100%;
    height: 100%;
    .homeimg {
      width: 100%;
      height: 100%;
    }
  }
}
</style>